@import "../index.less";

/* AppHeader */
.mob-header {
  .ant-tabs-bar { 
    margin: 0; 
    border-bottom: none;
  }
  .ant-tabs-content { display: none;}
  .ant-tabs-nav { 
    .ant-tabs-tab-inner {
      padding: 5px 0 10px 0; 
      font-size: 12px;
    }
    .ant-tabs-tab { margin-right: 16px;}
  }
}

/* AppSearch */
.app-search{
  position: relative;
   margin: 8px 0;
   .app-sort {
     position: absolute;
     right: 20px;
     top: 0;
     line-height: 2;
   }
}

/* AppSkin */
.appskin-modal{
  .ant-modal-body { 
    padding-right: 4px; 
    background: rgb(236, 236, 236);
  }
  .app-skin {
    img{
      width: 100%;
      height: 250px;
    }
    p {
      padding: 5px 10px;
      color: #666;
    }
  }
}

/* AppCard */
.apps-wrapper {
  position: relative;
  height: calc(~"100% - 120px");
  &>div { height: 100%;}
  .app-cards {
    height: 100%;
    display: block;
    position: relative;
    padding-left: 10px;
    margin-left: -10px;
    .app-card {
      display: inline-block;
      position: relative;
      width: 280px;
      height: 220px;
      margin: 0px 15px 15px 0;
      padding: 15px;
      overflow: hidden;
      border: 1px solid rgba(39,54,78,0.1);
      box-shadow: 0px 1px 2px 0px rgba(151,156,162,0.15);
      &>div { padding: 0}
      &:hover {
        box-shadow: 0px 6px 20px 0px rgba(0,0,0,.2);
        transition: .2s all;
      }
      .info {
        .thum {
          display: inline-block;
          background-position: 100% 90%;
          background-size: contain;
          width: 92px;
          min-width: 92px;
          height: 120px;
          overflow: hidden;
          &.default {
            img {
              border: none;
              height: auto;
              border-radius: 0;
            }
          }
          img {
            width: 100%;
            height: 100%;
            border: 1px solid #eee;
            border-radius: 3px;
          }
        }
        .basic {
          display: inline-block;
          max-width: 145px;
          margin-left: 10px;
          vertical-align: top;
          padding: 4px 0;
          .name {
            font-size: 18px;
            max-height: 3em;
            overflow: hidden;
            font-weight: normal;
          }
          .industry {
            font-size: 12px;
            line-height: 3;
          }
        }
      }
      .desc {
        margin: 20px 0;
        text-indent: 2px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .published {
        position: absolute;
        right: 15px;
        bottom: 15px;
        color: #aaa;
      }
      .modify-date {
        position: absolute;
        bottom: 10px;
        font-size: 12px;
        color: #afafaf;
        line-height: 26px;
        &:before {
          content: "\e666";
          padding: 0 3px 0 1px;
          font: 17px/1 @icon-fa;
          vertical-align: text-bottom;
        }
      }
      &:hover .overlay { display: block}
      .overlay {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 11;
        &.active { display: block;}
        .name {
          margin: 6px 0;
          padding: 0 35px;
          max-height: 3em;
          width: 100%;
          font-size: 18px;
          line-height: 3;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .app-editor,
        .qrcode {
          position: absolute;
          width: 100%;
          height: 100%;
          top: -100%;
          z-index: 13;
          background: #fff;
        }
        .app-editor {
          z-index: 14;
          padding: 14px 0;
          .ant-form-item { margin-bottom: 12px; }
          textarea { height: 56px !important; }
          button {
            font-size: 12px;
            line-height: 1.2;
          }
        }
        .qrcode {
          .content {
            margin: 15px auto;
            width: 100px;
            height: 100px;
            div,
            canvas {
              width: 100%;
              height: 100%;
            }
          }
          img {
            display: block;
            margin: 0 auto;
            width: 100px;
          }
          .tip {
            text-align: center;
            margin: 15px auto;
            padding: 0 45px;
            line-height: 1.5;
            color: #666;
          }
        }
        .qr-icon {
          position: absolute;
          display: block;
          top: 10px;
          right: 15px;
          width: 20px;
          height: 20px;
          cursor: @cur-pointer;
          &:before {
            font-size: 20px;
            font-family: @icon-fa;
          }
        }
        .actions {
          position: relative;
          height: 82px;
          div {
            position: absolute;
            margin: 0 auto;
            width: 75%;
            color: #969ca2;
            line-height: 2;
            text-align: center;
            bottom: 0;
            left: 0;
            right: 0;
            font-size: 14px;
            cursor: @cur-pointer;
            border: 1px solid #c7c7cb;
            &:hover, 
            &.active {
              color: @base;
              border: 1px solid @base;
              background: @base-hover;
            }
            &.active {
              top: 0;
              bottom: inherit;
            }
            &:hover+div {
              color: #969ca2;
              border: 1px solid #c7c7cb;
              background: inherit;
            }
          }
        }
        .icons {
          position: absolute;
          padding: 9px 26px;
          width: 100%;
          text-align: center;
          bottom: 0;
          a {
            display: inline-block;
            margin: 12px 10px;
            &:hover i {
              color: @base;
            }
            i {
              font-size: 22px;
              color: #969ca2;
            }
          }
        }
      }
    }
  }
}